// hides the node if it has no children.
// https://css-tricks.com/almanac/selectors/e/empty/
// - will match the following:
//     <div></div>
//   or:
//     <div><!-- nothing here --></div>
// - will not match:
//     <div> </div>
//   or:
//     <div>
//       <!-- test -->
//     </div>
//   or:
//     <div>
//     </div>
.hide-if-empty:empty {
  display: none !important;
}

// keep icon from wrapping early
.appended-icon {
  display:inline-block;
  .nowrap;
}

// Apply to custom angular tags so they can be given margin & padding, when needed.
// Can remove if/when layout.attrs updated to layout.flex
// https://github.com/benjaminapetersen/layout.flex/blob/master/dist/classes/flex-layout.classes.css#L134
.block {
  display: block;
}

// Keeps icon and text together inline
// Wraps 2 spans <div class="text-prepended-icon"><span class="pficon fa ..."></span> <span class="word-break-all">EnableTextToWrap</span></div>
// note: no need to add .fa-fw to icon
.text-prepended-icon {
  align-items: baseline; // align icon with text
  display: flex;
  .word-break;
}
